<template>
	<view class="wrapper">
		<div class="header posf" :style="{padding:`calc(10rpx + ${safeTop}px) 20rpx 20rpx`,background:`rgba(255,255,255,${scrollTop/50})`}">
			<u-icon name="arrow-left" @click="back(1)" :color="scrollTop>50?'#333':'#fff'" size="28"></u-icon>
		</div>
		<video src="" controls="true" autoplay="true"></video>
		<div class="bfff mb15">
			
			<div class="f35 fbold c333 title">《误杀2》预告视频</div>
			<div class="video bfff center mt20">
				<image src="../../static/shouye/cover.png" mode="aspectFill" class="cover mr25" lazy-load="true" ></image>
				<div class="flex1">
					<div class="f36 nowrap fbold mb30">《误杀2》</div>
					<div class="c666 mb20">评分 <text class="fbold cyellow">9.3</text></div>
					<div class="c666 mb20">主演：xxx</div>
					<div class="c666">xxx上映</div>
				</div>
				<div class="buy bth-red" @click.stop="openPage('../dianYing/dianYing')">购票</div>
			</div>
		</div>
		<div class="main bfff">
			<div class="f32 fbold c333 mb20">《误杀2》全部视频</div>
			<div class="header">
				<u-tabs :inactiveStyle="{ color: '#6b6b6b',border:'1rpx solid #eee',borderRadius:'25rpx',padding:'10rpx 20rpx',fontSize:'22rpx' }" :activeStyle="{ color: '#da5344',border:'1rpx solid #da5344',borderRadius:'25rpx',padding:'10rpx 20rpx',fontSize:'22rpx' }" lineColor="#fff"
					:list="list1" @click="click"></u-tabs>
			</div>
			<div class="videos center" v-for="v in 10" @click="openPage('./shipinXiangXi')">
				<div class="  video-box posr" >
					<image src="../../static/shouye/cover.png" mode="aspectFill" class="video-cover"></image>
					<div class="f26 nowrap cfff posa ">01:46</div>
					<div class="posa play center">
						<u-icon name="play-circle-fill" color="#fff" size="25"></u-icon>
					</div>
					<div class="posa cfff f20 type">预告片</div>
				</div>
				<div class="flex1 ml20">
					<div class="f30 fbold c333">《误杀2》爸爸的愿望爸爸的愿望愿望爸爸的愿望愿望爸爸的愿望</div>
				</div>
			</div>
			
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '剧照',
				}, {
					name: '海报'
				}, {
					name: '工作照'
				}, {
					name: '新闻图'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],
				scrollTop:0
			};
		},
		onPageScroll(e) {
			this.scrollTop=e.scrollTop
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '误杀2 全部视频'
			})
		},
		methods: {
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		width: 100%;
		top: 0;
		left: 0;
	}
	video{
		width: 750rpx;
		height: 435rpx;
	}
	.bfff {
		padding: 25rpx 26rpx;
		
		.video {
			padding:15rpx 0;
			border-radius: 15rpx;
		
			.cover {
				width: 145rpx;
				height: 200rpx;
				border-radius: 15rpx;
			}
		}
		.title{
			padding: 30rpx 0;
			border-bottom: 1rpx solid #e4e4e4;
		}
		::v-deep .u-tabs__wrapper__nav__item{
			padding: 0 15rpx 0 0 ;
		}
		.videos{
			padding:25rpx 0 ;
			border-bottom: 1rpx solid #e0e0e1;
		}
		.video-box {
			width: 250rpx;
			height: 140rpx;
			border-radius: 10rpx;
			
			.type{
				top: 4rpx;
				left: 4rpx;
				border-radius: 6rpx;
				padding: 8rpx 10rpx;
				background: rgba(0, 0, 0, .7);
				transform: scale(.8);
			}
			.play {
				width: 40rpx;
				height: 40rpx;
				left: calc(50% - 20rpx);
				top: calc(50% - 20rpx);
			}

			.nowrap {
				left: 15rpx;
				bottom: 10rpx;
				width: 280rpx;
			}

			.video-cover {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	}

</style>